<template>
  <div>
    <div class="boxx">
      <div class="one">街道</div>
      <div @click="poupose(1)" :style="jiedao!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{jiedao}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">社区</div>
      <div @click="poupose(2)" :style="shequ!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{shequ}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">建筑物</div>
      <input class="two" maxlength="30" v-model="jzwname" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">具体地址</div>
      <input class="two" maxlength="30" v-model="address" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">物管名称</div>
      <input class="two" maxlength="30" v-model="wuguaname" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">楼层类别</div>
      <div @click="poupose(9)" :style="plies!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{plies}}</div>
        <van-icon name="arrow" />
      </div>
    </div>

    <div class="boxx">
      <div class="one">产权性质</div>
      <div @click="poupose(4)" :style="chanquan!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{chanquan}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">消防情况</div>
      <div @click="poupose(5)" :style="xiaofang!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{xiaofang}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">定位</div>
      <div @click="poupose(6)" :style="dingweiname!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{dingweiname}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">附件</div>
      <div @click="poupose(7)" :style="fujianame!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{fujianame}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">显示</div>
      <div @click="poupose(8)" :style="xianshi!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{xianshi}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div style="padding:0.3rem 0;margin-top:1rem;">
      <div @click="queding" class="yes">确定</div>
    </div>
    <!-- 弹框-->
    <van-popup v-model="show">
      <div class="cont">
        <div class="list_one">
          <div class="list">
            <div>请选择</div>
            <img @click="show=false" src="../../assets/images/tk_x.png" />
          </div>
        </div>
        <div class="list_two">
          <div class="list" @click="choose(index)" v-for="(v,index) in list">
            <div>{{v.mc}}</div>
            <img v-if="index!=hh" src="../../assets/images/tk_g_false.png" />
            <img v-if="index==hh" src="../../assets/images/tk_g_true.png" />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 提示 -->
    <van-popup v-model="showtishi">
      <div style="width: 100%;">
        <div class="list_one">
          <div class="list">
            <div>提示</div>
            <img @click="showtishi=false" src="../../assets/images/tk_x.png" />
          </div>
        </div>
        <div class="thishi_two">
          <div class="tishicont">{{tishiname}}</div>
          <div style="padding-bottom: 0.2rem;width: 100%;">
            <div @click="showtishi=false" class="thishiyes">确定</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import Toast from "../toast.vue"
  export default {
    name: 'jiuxiaomen',
    data() {
      return {
        showtishi: false,
        tishiname: '',
        show: false, //弹框显示
        jiedao: '请选择', //街道
        shequ: '请选择', //社区
        plies: '请选择', //层数
        xianshi: '请选择', //显示
        jzwname: '', //建筑物
        chanquan: '请选择', //产权性质
        xiaofang: '请选择', //消防情况
        dingweiname: '请选择',
        fujianame: '请选择',
        address: '', //具体地址
        wuguaname: '', //物管名字
        dingweilist: [{
          mc: "不限",
          id: -1
        }, {
          mc: "有",
          id: 1
        }, {
          mc: "无",
          id: 0
        }],
        show1list: [{
          mc: "地图模式"
        }, {
          mc: "列表模式"
        }],
        plieslist: [{
          mc: "不限",
          id: -1
        }, {
          mc: "一般建筑物",
          id: 1
        }, {
          mc: "高层建筑物",
          id: 0
        }],
        chanquanlist: [{
          mc: "不限",
          id: -1
        }, {
          mc: "商用",
          id: 2
        }, {
          mc: "住宅",
          id: 1
        }, {
          mc: "商住混合",
          id: 3
        }, {
          mc: "其他",
          id: 4
        }],
        xiaofanglist: [{
          mc: "不限",
          id: -1
        }, {
          mc: "正常",
          id: 1
        }, {
          mc: "部分设施缺失但能正常供水",
          id: 2
        }, {
          mc: "不能正常供水",
          id: 3
        }],
        fujian_id: -1,
        dingwei_id: -1,
        jiedaolist: '',
        shequlist: '',
        list: '', //弹框的展示列表
        hh: -1, //选择转换图片
        b: null, //记录不同弹框选择的区别
        userid: '', //用户id
        jiedaoId: '', //选择的街道id
        shequId: '', //选择的shequid
        canquanId: -1,
        xiaofangId: -1,
        pliesId: -1,
      }
    },
    methods: {
      poupose(n) {
        console.log(n)
        if (n == 1) {
          this.b = n
          this.list = this.jiedaolist
          if (this.jiedao == "请选择") {
            this.hh = -1
          } else {
            this.jiedaolist.forEach((i, item) => {
              if (i.mc == this.jiedao) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 4) {
          this.b = n
          this.list = this.chanquanlist
          if (this.chanquan == "请选择") {
            this.hh = -1
          } else {
            this.chanquanlist.forEach((i, item) => {
              if (i.mc == this.chanquan) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 2) {
          this.b = n
          if (this.jiedao == "请选择" || this.jiedao == "不限") {
            this.$toast("请先选择街道")
            return
          } else {
            this.list = this.shequlist
            if (this.shequ == "请选择") {
              this.hh = -1
            } else {
              this.shequlist.forEach((i, item) => {
                if (i.mc == this.shequ) {
                  this.hh = item
                }
              })
            }
            this.show = true
          }
        } else if (n == 5) {
          this.b = n
          this.list = this.xiaofanglist
          if (this.xiaofang == "请选择") {
            this.hh = -1
          } else {
            this.xiaofanglist.forEach((i, item) => {
              if (i.mc == this.xiaofang) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 8) {
          this.b = n
          this.list = this.show1list
          if (this.xianshi == "请选择") {
            this.hh = -1
          } else {
            this.show1list.forEach((i, item) => {
              if (i.mc == this.xianshi) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 6) {
          this.b = n
          this.list = this.dingweilist
          if (this.dingweiname == "请选择") {
            this.hh = -1
          } else {
            this.dingweilist.forEach((i, item) => {
              if (i.mc == this.dingweiname) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 7) {
          this.b = n
          this.list = this.dingweilist
          if (this.fujianame == "请选择") {
            this.hh = -1
          } else {
            this.dingweilist.forEach((i, item) => {
              if (i.mc == this.fujianame) {
                this.hh = item
              }
            })
          }
          this.show = true
        } else if (n == 9) { //楼层名称
          this.b = n
          this.list = this.plieslist
          if (this.plies == "请选择") {
            this.hh = -1
          } else {
            this.plieslist.forEach((i, item) => {
              if (i.mc == this.plies) {
                this.hh = item
              }
            })
          }
          this.show = true
        }
      },
      choose(index) {
        this.hh = index
        this.show = false
        if (this.b == 4) { //产权
          this.chanquan = this.chanquanlist[index].mc
          this.canquanId = this.chanquanlist[index].id
        } else if (this.b == 1) {
          this.jiedao = this.jiedaolist[index].mc
          this.jiedaoId = this.jiedaolist[index].id
          this.shequ = "请选择"
          this.getcommunit()
        } else if (this.b == 2) {
          this.shequ = this.shequlist[index].mc
          this.shequId = this.shequlist[index].id
        } else if (this.b == 5) { //消防
          this.xiaofang = this.xiaofanglist[index].mc
          this.xiaofangId = this.xiaofanglist[index].id
        } else if (this.b == 8) { //显示
          this.xianshi = this.show1list[index].mc
        } else if (this.b == 6) { //定位
          this.dingweiname = this.dingweilist[index].mc
          this.dingwei_id = this.dingweilist[index].id
        } else if (this.b == 7) { //附件
          this.fujianame = this.dingweilist[index].mc
          this.fujian_id = this.dingweilist[index].id
        } else if (this.b == 9) { //楼层名称
          this.plies = this.plieslist[index].mc
          this.pliesId = this.plieslist[index].id
        }
      },
      queding() {
        try {
          plus.nativeUI.showWaiting("正在加载...");

        } catch (e) {
          console.log('plus问题');
        }
        this.jzwname =this.jzwname.replace(/\s+/g,"");
        this.address =this.address.replace(/\s+/g,"");
        this.wuguaname =this.wuguaname.replace(/\s+/g,"");
        console.log(this.jiedaoId)
        console.log(this.shequId)
        console.log(this.jzwname)
        console.log(this.address)
        console.log(this.wuguaname)
        console.log(this.pliesId)
        console.log(this.canquanId)
        console.log(this.xiaofangId)
        console.log(this.dingwei_id)
        console.log(this.fujian_id)
        var session_id = []
        session_id[0] = this.jiedaoId
        session_id[1] = this.shequId
        session_id[2] = this.pliesId
        session_id[3] = this.canquanId
        session_id[4] = this.xiaofangId
        session_id[5] = this.dingwei_id
        session_id[6] = this.fujian_id
        session_id[7] = this.jzwname
        session_id[8] = this.address
        session_id[9] = this.wuguaname
        console.log(session_id)
          if(this.shequlist.length!==0){
              sessionStorage.setItem("sqlist_jzw",JSON.stringify(this.shequlist) )
          }
        var xqda_params = {
          path: '/file_query1', //列表或地图页面返回的路径
          cs_cx: { //列表或地图页面查询参数
            dwStreetId: this.jiedaoId, //街道id
            dwCommunityId: this.shequId, //社区id
            propertyNature: this.canquanId, //产权性质
            fireControlInfo: this.xiaofangId, //消防情况
            haveMap: this.dingwei_id,
            gd: this.pliesId,
            haveFj: this.fujian_id,
            address: this.address, //地址
            managementName: this.wuguaname, //物管名称
            name: this.jzwname,
          },
          cx_type: 'jzw'
        };
        localStorage.setItem("xqda_params", JSON.stringify(xqda_params));
        var find_params={
          dwStreetId: this.jiedaoId, //街道id
          dwCommunityId: this.shequId, //社区id
          propertyNature: this.canquanId, //产权性质
          fireControlInfo: this.xiaofangId, //消防情况
          haveMap: this.dingwei_id,
          gd: this.pliesId,
          haveFj: this.fujian_id,
          address: this.address, //地址
          managementName: this.wuguaname, //物管名称
          name: this.jzwname,
          page:1,
          pageSize:1,
        }
        this.axios.get(this.$global_msg.Url.host + '/construction/selectConstructionByExample', {
          params:find_params
        }).then((res) => {
          console.log(res)
          if(res.data.code==0){
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
            if (res.data.rows.length == 0) {
              this.showtishi = true
              this.tishiname = "查询无数据！"
            } else {
              if (this.xianshi == '地图模式') {
                this.$router.push("/mode_map");
                sessionStorage.setItem("session_jzw", JSON.stringify(session_id))
              } else if (this.xianshi == '列表模式') {
                this.$router.push("/mode_list_jzw");
                sessionStorage.setItem("session_jzw", JSON.stringify(session_id))
              } else {
                this.showtishi = true
                this.tishiname = "请选择显示模式!"
              }
            }
          }else{
            this.$toast(res.data.msg)
          }
        }).catch((err) => {
          this.$toast(err)
        })
      },
      getcommunit() {
        this.axios({
          methods: 'get',
          url: this.$global_msg.Url.host + '/queryFile/queryCommunity?sid=' + this.jiedaoId,
        }).then((res) => {
          console.log(res)
          if (res.data.rows.length == 1) {
            this.shequ = res.data.rows.sq.mc
            this.shequId = res.data.rows.sq.id
          } else {
            this.shequlist = res.data.rows
          }
        }).catch((err) => {
          console.log(err)
        })
      },
    },
    created() {
      // this.$forceUpdate()
      this.userid = localStorage.getItem("userId")
      console.log(this.userid)
    },
    mounted() {
      this.xianshi = this.show1list[1].mc
      this.axios({
        methods: 'get',
        url: this.$global_msg.Url.host + '/nineStore/selectStreetAndCommunity?userId=' + this.userid,
      }).then((res) => {
        console.log(res)
        if (res.data.rows.lev == 1) { //街道用户
          this.jiedao = res.data.rows.jd.mc
          this.jiedaoId = res.data.rows.jd.id
          if (res.data.rows.sq.length == 1) {
            this.shequ = res.data.rows.sq.mc
            this.shequId = res.data.rows.sq.id
          } else {
            this.shequlist = res.data.rows.sq
          }
        } else if (res.data.rows.lev == 2) { //社区用户
          this.jiedao = res.data.rows.jd.mc
          this.jiedaoId = res.data.rows.jd.id
          this.shequ = res.data.rows.sq.mc
          this.shequId = res.data.rows.sq.id
        } else if (res.data.rows.lev == 0) { //区域用户
          this.jiedaolist = res.data.rows.jd
        }
        var _this = this
        let arrjzw = JSON.parse(sessionStorage.getItem("session_jzw"))
        if (arrjzw!== null) {
          console.log(arrjzw)
          if (arrjzw[7] !== "") {
            _this.jzwname = arrjzw[7]
          }
          if (arrjzw[8] !== "") {
            _this.address = arrjzw[7]
          }
          if (arrjzw[9] !== "") {
            _this.wuguaname = arrjzw[9]
          }
          if (arrjzw[0] !== "") {
            if (_this.jiedao== "请选择" || _this.jiedao== "不限") {
              console.log(_this.jiedaolist)
              _this.jiedaolist.forEach((v, index) => {
                if (v.id == arrjzw[0]) {
                  _this.jiedao = v.mc
                  _this.jiedaoId=arrjzw[0]
                }
              })
            }
          }
          let shequlist_jzw=JSON.parse(sessionStorage.getItem("sqlist_jzw"))
          if (arrjzw[1]!== "") {
            if (_this.shequ== "请选择" || _this.shequ== "不限") {
              console.log(shequlist_jzw)
              shequlist_jzw.forEach((v, index) => {
                if (v.id == arrjzw[1]) {
                  _this.shequ = v.mc
                  _this.shequId=arrjzw[1]
                  _this.shequlist=shequlist_jzw
                }
              })
            }
          }
          if (arrjzw[2] !== "") {
            _this.plieslist.forEach((v, index) => {
              if (v.id == arrjzw[2]) {
                _this.plies = v.mc
                _this.pliesId=arrjzw[2]
              }
            })
          }
          if (arrjzw[3] !== "") {
            _this.chanquanlist.forEach((v, index) => {
              if (v.id == arrjzw[3]) {
                _this.chanquan = v.mc
                _this.canquanId=arrjzw[3]
              }
            })
          }
          if (arrjzw[4] !== "") {
            _this.xiaofanglist.forEach((v, index) => {
              if (v.id == arrjzw[4]) {
                _this.xiaofang = v.mc
                _this.xiaofangId=arrjzw[4]
              }
            })
          }
          if (arrjzw[5] !== "") {
            _this.dingweilist.forEach((v, index) => {
              if (v.id == arrjzw[5]) {
                _this.dingweiname = v.mc
                _this.dingwei_id=arrjzw[5]
              }
            })
          }
          if (arrjzw[6] !== "") {
            _this.dingweilist.forEach((v, index) => {
              if (v.id == arrjzw[6]) {
                _this.fujianame = v.mc
                _this.fujian_id=arrjzw[6]
              }
            })
          }
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  .thishiyes {
    width: 1.851851rem;
    background-color: #2B6CFE;
    color: white;
    border-radius: 0.095185rem;
    margin: auto;
    text-align: center;
    padding: 0.2rem 0;
  }

  .tishicont {
    height: 2rem;
    text-align: center;
    line-height: 2rem;
  }

  .newadd {
    height: 0.825925rem;
    background-color: #2B6CFE;
    text-align: center;
    line-height: 0.825925rem;
    color: white;
    border-radius: 0.095185rem;
    width: 30%;
    margin: 0.5rem auto;
  }

  .input {
    height: 1rem;
    margin-top: 1.6rem;
  }

  .input input {
    border: 1px solid #EEEEEE;
    width: 92%;
    margin-left: 4%;
    height: 1.2rem;
    text-align: left;
  }

  .list {
    height: 1.388888rem;
    border-bottom: 2px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
  }

  .list_one img {
    width: 0.4rem;
  }

  .list_two {
    max-height: 6.944444rem;
    height: auto;
    overflow: scroll;
  }

  .list_two img {
    width: 0.35rem;
    margin-right: 0.2rem;
  }

  .van-popup {
    width: 90%;
    border-radius: 0.185185rem;
  }

  .cont {
    width: 100%;
  }

  .boxx .one {
    margin-left: 0.5rem;
  }

  .boxx .two {
    margin-right: 0.5rem;
  }

  .choose {
    color: #5F5D5C;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.3rem;
  }

  .boxx {
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.3rem;
  }

  .yes {
    width: 80%;
    height: 0.825925rem;
    background-color: #2B6CFE;
    text-align: center;
    line-height: 0.825925rem;
    color: white;
    border-radius: 0.095185rem;
    margin-left: 10%;
  }

  input {
    text-align: left;
    width: 5.555555rem;
  }
</style>
